<template>
  <div>
    <div class="table-page-search-wrapper warp" >
    <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="formData" :rules="rules">
      <a-row :gutter="24">
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="签订日期" prop="title">
            <a-date-picker placeholder="请选择签订日期" style="width:100%;" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item label="合同期限" prop="title">
            <!-- <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }" >
              <a-date-picker style="width: 100%" />
            </a-form-item>
            <span>-</span>
            <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
              <a-date-picker style="width: 100%" />
            </a-form-item> -->
            <a-range-picker placeholder="请选择合同期限" style="width:100%;" />
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" >
          <a-form-model-item   label="收款日" prop="title">
            <span class="ant-form-text">
              账单开始前每月
            </span>
            <a-input-number :min="1" :max="31"/>
            <span class="ant-form-text">
              日
            </span>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    </div>
    <vxe-grid
      ref="xTable"
      border
      resizable
      keep-source
      height="300px"
      align="center"
      :edit-rules="validRules"
      :edit-config="{trigger: 'click', mode: 'row'}"
      :toolbar-config="{slots: { buttons: 'toolbar_buttons'}}"
      :columns="tableColumn"
      :data="dataSource"
      @checkbox-all="onSelectChange"
      @checkbox-change="onSelectChange"
    >
      <template v-slot:toolbar_buttons>
        <a-button type="primary" icon="plus" style="margin:0px 8px 0px 0px;" @click="handleAdd">新增</a-button>
        <a-dropdown v-if="selectionRows.length > 0">
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="batchDel"><a-icon type="delete" />删除</a-menu-item>
          </a-menu>
          <a-button>批量操作<a-icon type="down" /></a-button>
        </a-dropdown>
      </template>
      <template v-slot:price="{ row }">
        <a-input v-model="row.price">
          <a-select slot="addonAfter" default-value="1" style="width: 120px">
            <a-select-option value="1">元/平米/月</a-select-option>
            <a-select-option value="2">元/平米/天</a-select-option>
            <a-select-option value="3">元/平米</a-select-option>
          </a-select>
        </a-input>
      </template>
      <!-- <template v-slot:priceText="{ row }">
        <span>{{row.price}}</span>
      </template> -->
    </vxe-grid>
  </div>
</template>
<script >
export default {
  name: 'ContractCost',
  props: {
    dataSource: {
      type: Array,
      default: () => [{}]
    }
  },
  data() {
    return {
      loading: false,
      formData:{},
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      rules: {},
      tableColumn: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { field: 'cost', title: '费项'},
        { field: 'price', title: '单价', editRender: {}, slots: { edit: 'price' }},
        { field: 'a', title: '金额'}
      ],
      validRules: {
        
      },
      selectionRows: [],
      selectedRowKeys: []
    }
  },
  methods: {
    getTableData() {
      return this.$refs.xTable.getTableData()
    },
    handleAdd() {
      this.$refs.xTable.insertAt({}, -1)
    },
    handleDelete(row) {
      this.$refs.xTable.remove(row)
    },
    batchDel() {
      this.$refs.xTable.removeCheckboxRow()
    },
    onSelectChange({ records }) {
      this.selectedRowKeys = []
      records.forEach(item => {
        this.selectedRowKeys.push(item.id)
      })
      this.selectionRows = records
    }
  }
}
</script>
